<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
 <style>
     ul{
         padding: 0;
         margin: 0;
         margin-top: 0;
         list-style: none;
     }
     ul li {
         border: 1px solid brown;
         height: 50px;
         width: 50px;
         display: inline-block;
         line-height: 50px;
         text-align: center;
         font-size: 30px;
         font-weight: bold;
         margin-left: 5px;
     }
 </style>
 <script>
     window.onload = function(){
         var lists = document.getElementById("lists"),
             btn = document.getElementById("btn"),
             str = '',
            //  listItem = document.getElementsByTagName("li"),
             color = ['tan','skyblue','yellowgreen','orange','pink'];

             btn.onclick = function(){
                 for(var i = 0; i < 10; i++){
                    // "<li >"
                    // 'background:" + aColor[i%4] + "'
                     str += "<li style='background:" + color[i%5] + "' >" + i + "</li>";
                 }
                 lists.innerHTML = str;
             }  
     }
 </script>
</head>
<body>
  <input type="button" value="自动生成10个li" id="btn">
  <ul id="lists"></ul>
</body>
</html>